<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        .report_card{
            width:800px;
            margin:0 auto;
            font-size:12px;
        }
        .report_card table{
            width:100%;
            border-collapse: collapse;
            text-align:center;
        }
        .report_card caption{
            font-size:14px;
            text-align:left;
            line-height:30px;
            font-weight:bold;
        }
        .report_card table th,.report_card table td{
            border:1px solid #ccc;
        }
        .report_card table th{
            height:36px;
            background:#f8f8f8;
        }
        .report_card table td{
            height:32px;
            background:#f8f8f8;
        }
        .content{
            width:100%;
            height:32px;
            line-height:32px;
            position:relative;
        }
        .content input{
            position:absolute;
            top:0;
            left:0;
            width:100%;
            color:#999;
            padding-left:10px;
            -webkit-box-sizing:border-box;
            box-sizing:border-box;
            height:30px;
            border:1px solid blue;
            -webkit-animation:borderAn 2s infinite;
            animation:borderAn 2s infinite;
        }
        .studyForm select{
            width:100px;
            height:28px;
        }
        .searchInput{
            width:200px;
            height:28px;
        }
        .searchButton{
            width:100px;
            height:32px;
        }
        @-webkit-keyframes borderAn{
            0%{
                border-color:transparent;
            }
            100%{
                border-color:blue;
            }
        }
        @keyframes borderAn{
            0%{
                border-color:transparent;
            }
            100%{
                border-color:blue;
            }
        }
        .studyForm{
            margin:10px 0;
        }
        .studyForm input{
            width:120px;
            height:30px;

        }
    </style>
</head>
<body>
    <div class="report_card" id="reportCard">
        <table class="studyForm">
            <caption>学生信息</caption>
            <tbody>
                <tr>
                    <td width="170">学号:<input type="text" v-model="add.stuId"></td>
                    <td width="170">姓名:<input type="text" v-model="add.name"></td>
                    <td width="170">年龄:<input type="text" v-model="add.age"></td>
                    <td width="170">班级:<input type="text" v-model="add.class"></td>
                    <td colspan="2" width="120">
                        <a href="javascript:void(0);" v-on:click="submitStu">录入</a>
                        <a href="javascript:void(0);" v-on:click="resetStu">重置</a>
                    </td>
                </tr>
                <tr>
                    <td align="left">
                        搜索：<input v-model="searchTxt" type="text" class="searchInput">
                    </td>
                    <td>
                        排序字段:
                        <select v-model='sortKey'>
                            <option value="age">年龄</option>
                            <option value="class">班级</option>
                        </select>
                    </td>
                    <td>
                        排序类型：
                        <select v-model="sortClass">
                            <option value="1">升序</option>
                            <option value="-1">降序</option>
                        </select>
                    </td>
                    <td colspan="3"></td>
                </tr>
            </tbody>
        </table>
        <table class="scoreList">
            <caption>学生排列</caption>
            <thead>
                <th width="170">学号</th>
                <th width="170">姓名</th>
                <th width="170">班级</th>
                <th width="170">年龄</th>
                <th colspan="2" width="120">操作</th>
            </thead>
            <tbody>
                <tr v-for="item in studyArr | filterBy searchTxt | orderBy sortKey sortClass">
                    <td><div class="content">{{item.stuId}}<input v-model="editArr.stuId" type="text" v-if="item.stuId==nowEditCol"></div></td>
                    <td><div class="content">{{item.name}}<input v-model="editArr.name" type="text" v-if="item.stuId==nowEditCol"></div></td>
                    <td><div class="content">{{item.age}}<input v-model="editArr.age" type="text" v-if="item.stuId==nowEditCol"></div></td>
                    <td><div class="content">{{item.class}}<input v-model="editArr.class" type="text" v-if="item.stuId==nowEditCol"></div></td>
                    <td>
                        <a href="javascript:void(0);" v-on:click="startEdit(item.stuId)" v-if="item.stuId!=nowEditCol">编辑</a>
                        <a href="javascript:void(0);" v-on:click="cancelEdit" v-if="item.stuId==nowEditCol">取消</a>
                        <a href="javascript:void(0);" v-on:click="sureEdit(item.stuId)" v-if="item.stuId==nowEditCol">确认</a>
                    </td>
                    <td><a href="javascript:void(0);" v-on:click="deleteStu(item.stuId)">删除</a></td>
                </tr>
            </tbody>
        </table>
    </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
    
    <script type="text/javascript">
        var studyArrJson=[
            {'stuId':'stu0001','name':'张三','age':18,'class':182},
            {'stuId':'stu0002','name':'李四','age':28,'class':183},
            {'stuId':'stu0003','name':'王五','age':38,'class':184},
            {'stuId':'stu0004','name':'刘六','age':66,'class':185}
        ];
        var reportCardVm=new Vue({
            el:'#reportCard',
            data:{
                studyArr:studyArrJson,//成绩花名册
                add:{'stuId':'','name':'','age':'','class':''},//新增的表单字段
                nowEditCol:-1,//当前编辑的行
                editStatus:false,//当前是否在编辑状态
                searchTxt:'',//搜索字段
                sortKey:'age',//排序健
                sortClass:'1',//升降排序1为升,-1为降
            },
            methods:{
                //启动索引index数据编辑
                startEdit:function(id){
                    this.nowEditCol=id;
                },
                //取消编辑状态
                cancelEdit:function(){
                    this.nowEditCol=-1;
                },
                //启动索引index数据修改确认
                sureEdit:function(id){
                  for(var i=0,len=this.studyArr.length;i<len;i++){
                    if(id === this.studyArr[i]['stuId'] ){
                      this.studyArr.splice(i,1,this.editArr);
                      break;
                    }
                  }
                  this.nowEditCol=-1;
                },
                //删除索引index数据
                deleteStu:function(id){
                    for(var i=0,len=this.studyArr.length;i<len;i++){
                      if(id === this.studyArr[i]['stuId'] ){
                        this.studyArr.splice(i,1);
                        break;
                      }
                    }
                },
                //新增成绩
                submitStu:function(){
                    var add={
                        'stuId':this.add.stuId,
                        'name':this.add.name,
                        'age':this.add.age,
                        'class':this.add.class
                    };
                    this.studyArr.push(add);
                    this.resetStu();
                },
                //复位新增表单
                resetStu:function(){
                    this.add={
                        'stuId':'',
                        'name':'',
                        'age':'',
                        'class':''
                    }
                }
            },
            computed:{
                //存储当前编辑的对象
                editArr:function(){
                    var editO={};
                    for(var i=0,len=this.studyArr.length;i<len;i++){
                      if(this.nowEditCol === this.studyArr[i]['stuId'] ){
                        editO= this.studyArr[i];
                        break;
                      }
                    }
                    return {
                        'stuId':editO.stuId,
                        'name':editO.name,
                        'age':editO.age,
                        'class':editO.class
                    }
                }
            }
        })
    </script>
</body>
</html>